<template>
  <div class="app-container">
    <div class="div-table">
      <div class="search-form" style="margin-bottom:15px;">
        <el-input
          v-model="searchForm.name"
          size="small"
          clearable
          placeholder="系统名"
          style="width:200px;"
        />
        <el-button type="primary" size="small" @click="() => fetchData()">查询</el-button>
        <el-button type="primary" size="small" @click="() => reset()">重置</el-button>
        <el-button type="primary" size="small" @click="() => addOrUpdate()">新增</el-button>
      </div>
      <el-table
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        @sort-change="sortTable"
      >
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="系统名" prop="name" sortable>
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="系统编号" prop="code" sortable>
          <template slot-scope="scope">{{ scope.row.code }}</template>
        </el-table-column>
        <el-table-column label="系统状态" prop="status" sortable>
          <template slot-scope="scope">{{ scope.row.status }}</template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" sortable>
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createName" sortable>
          <template slot-scope="scope">
            <span>{{ scope.row.createName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="() => addOrUpdate(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="() => del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <pagination :pagination="pagination" />
      </div>
    </div>

    <el-dialog :title="activeTitle" :visible.sync="dialogFormVisible">
      <el-form ref="ruleForm" :model="form" :rules="formrules">
        <el-form-item label="系统名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" clearable autocomplete="off" />
        </el-form-item>
        <el-form-item label="系统编号" :label-width="formLabelWidth" prop="code">
          <el-input v-model="form.code" clearable autocomplete="off" />
        </el-form-item>
        <el-form-item label="系统状态" :label-width="formLabelWidth" prop="status">
          <el-select
            v-model="form.status"
            size="small"
            clearable
            filterable
            placeholder="系统状态"
          >
            <el-option
              v-for="item in systemStatusMaps"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="form.remark" clearable autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination/index'
import { getList, getDetail, save, del } from '@/api/systemapi/app_system'
import { getAllList } from '@/api/systemapi/user'
import { pageParams } from '@/settings'

export default {
  // 使用组件声明
  components: {
    pagination: Pagination
  },
  filters: {
    statusTypeFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      systemStatusMaps: [
        { id: 1, name: '开发中' },
        { id: 2, name: '已上线' },
        { id: 3, name: '维护中' },
        { id: 3, name: '已下线' }
      ],
      userList: [], // 用户列表
      list: null,
      listLoading: true,
      defaultProps: {
        children: 'children',
        label: 'name',
        id: 'id'
      },
      searchForm: {
        sidx: '', // 排序字段
        sord: '', // 排序方向
        name: '',
        status: '',
        rows: '10',
        page: '1'
      },
      activeTitle: '新增系统', // 新增编辑菜单模态框标题
      dialogFormVisible: false, // 模态框
      formLabelWidth: '100px',
      // 新增&编辑 表单
      form: {
        hostname: '',
        ipaddr: '',
        userId: '',
        area: '',
        remark: ''
      },
      formrules: {
        name: [
          { required: true, message: '系统名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '系统编号', trigger: 'blur' }
        ],
        status: [
          { required: false, message: '系统状态', trigger: 'change' }
        ],
        remark: [
          { required: false, message: '备注', trigger: 'blur' }
        ]
      },
      // 分页
      pagination: pageParams
    }
  },
  watch: {
    // 分页查询
    'pagination.currentPage': function() {
      this.searchForm.page = this.pagination.currentPage
      this.fetchData()
    },
    'pagination.pageSize': function() {
      this.searchForm.rows = this.pagination.pageSize
      this.searchForm.page = 1
      this.fetchData()
    }
  },
  // 页面初始化时执行
  created() {
    // 主机列表
    this.fetchData()
    // 用户列表
    // this.fetchUserData()
  },
  methods: {
    // 重置搜索，刷新列表
    reset() {
      this.searchForm = {
        sidx: '', // 排序字段
        sord: '', // 排序方向
        name: '',
        status: '',
        rows: '10',
        page: '1'
      }
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getList({ ...this.searchForm }).then(response => {
        this.list = response.data.rows
        this.pagination.total = response.data.records
        this.listLoading = false
      })
    },
    fetchUserData() {
      getAllList({}).then(response => {
        this.userList = response.data
      })
    },
    sortTable(column) {
      // 获取字段名称和排序类型
      var fieldName = column.prop
      var sortingType = column.order

      const sortTypeMap = {
        '': '',
        ascending: 'asc',
        descending: 'desc'
      }

      this.searchForm.sidx = fieldName
      this.searchForm.sord = sortTypeMap[sortingType]

      this.fetchData()
    },
    // 删除
    del(data) {
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          del(data.id).then(response => {
            if (response.code === 0) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.dialogFormVisible = false
              this.fetchData()
            } else {
              this.$message({
                message: response.msg,
                type: 'error'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 新增
    addOrUpdate(data) {
      this.resetFileds()
      this.form = {
        name: '',
        status: '',
        code: '',
        remark: ''
      }
      this.dialogFormVisible = true
      this.activeTitle = '新增系统'
      if (data) {
        this.activeTitle = '新增系统'
        getDetail(data.id).then(response => {
          this.form = response.data
        })
      }
    },
    // 保存
    save() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          save({ ...this.form }).then(response => {
            if (response.code === 0) {
              this.$message({
                message: '更新成功',
                type: 'success'
              })
              this.dialogFormVisible = false
              this.fetchData()
            } else {
              this.$message({
                message: response.msg,
                type: 'error'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    resetFileds() {
      // 重置校验
      if (this.$refs['ruleForm']) {
        this.$refs['ruleForm'].resetFields()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  display: flex;
  width: 100%;
  .div-tree {
    width: 300px;
  }
  .div-table {
    flex: 1;
  }
  .el-row {
    height: 300px;
    .el-col {
      height: 100%;
      .div-tree {
        height: 90%;
        .el-tree {
          height: 100%;
          overflow-y: auto;
        }
      }
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
